import {defineComponent} from '../../src'


export default defineComponent(props => {
    const STORAGE_KEY = 'todo-friendly-petite-vue'
    const todoStorage = {
        fetch() {
            const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
            todos.forEach((todo, index) => {
                todo.id = index
            });
            todoStorage.uid = todos.length

            return todos
        },
        save(todos) {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
        }
    }

    const filters = {
        all(todos) {
            return todos
        },
        active(todos) {
            return todos.filter(todo => !todo.completed)
        },
        completed(todos) {
            return todos.filter(todo => todo.completed)
        }
    }



    return {
        template: `
        <section class="todoapp">
            <header class="header">
                <h1>todos</h1>
                <input 
                  class="new-todo"
                  autofocus
                  autocomplete="off"
                  placeholder="What needs to be done?"
                  v-model="newTodo"
                  @keyup.enter="addTodo" />
            </header>
            <section class="main" v-show="todos.length">
                <input
                  id="toggle-all"
                  class="toggle-all"
                  type="checkbox"
                  v-model="allDone" />
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <li
                      v-for="todo in filteredTodos"
                      class="todo"
                      :key="todo.id"
                      :class="{ completed: todo.completed, editing: todo === editedTodo }"
                    >
                        <div class="view">
                            <input class="toggle" type="checkbox" v-model="todo.completed" />
                            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                            <button class="destroy" @click="removeTodo(todo)"></button>
                        </div>
                        <input
                          class="edit"
                          type="text"
                          v-model="todo.title"
                          v-effect="if (todo === editedTodo) $el.focus()"
                          @blur="doneEdit(todo)"
                          @keyup.enter="doneEdit(todo)"
                          @keyup.escape="cancelEdit(todo)"
                          />
                    </li>
                </ul>
            </section>
            <footer class="footer" v-show="todos.length">
                <span class="todo-count">
                    <strong>{{ remaining }}</strong>
                    <span>{{ pluralize(remaining) }} left</span>
                </span>
                <ul class="filters">
                    <li>
                        <a href="#/all" :class="{ selected: visibility === 'all' }">All</a>
                    </li>
                    <li>
                        <a href="#/active" :class="{ selected: visibility === 'active' }">Active</a>
                    </li>
                    <li>
                        <a href="#/completed" :class="{ selected: visibility === 'completed' }">Completed</a>
                    </li>
                </ul>
                <button
                  class="clear-completed"
                  @click="removeCompleted"
                  v-show="todos.length > remaining"
                >
                    Clear completed
                </button>
            </footer>
        </section>
        `,
        mounted() {
            const onHashChange = () => {
                var visibility = window.location.hash.replace(/#\/?/, '')
                if (filters[visibility]) {
                    this.visibility = visibility
                }
                else {
                    window.location.hash = ''
                    this.visibility = 'all'
                }
            }

            window.addEventListener('hashchange', onHashChange)
            onHashChange()
        },
        effect() {
            todoStorage.save(this.todos)
            console.log(this.visibility)
        },
        data() {
            return {
                newTodo: '',
                editedTodo: null,
                todos: todoStorage.fetch(),
                visibility: 'all',

                get filteredTodos () {
                    return filters[this.visibility](this.todos)
                },
                get remaining () {
                    return filters.active(this.todos).length
                },
                get allDone() {
                    return this.remaining === 0
                },
                set allDone(value) {
                    this.todos.forEach(todo => {
                        todo.completed = value
                    })
                }
            }
        },
        methods: {
            addTodo() {
                let value = this.newTodo && this.newTodo.trim()
                if (!value) {
                    return
                }
                this.todos.push({
                    id: (+new Date()),
                    title: value,
                    completed: false
                })
                this.newTodo = ''
            },
            editTodo(todo) {
                this.beforeEditCache = todo.title
                this.editedTodo = todo
            },
            removeTodo(todo) {
                this.todos.splice(this.todos.indexOf(todo), 1)
            },
            doneEdit(todo) {
                if (!this.editedTodo) {
                    return
                }

                this.editedTodo = null
                todo.title = todo.title.trim()
                if (!todo.title) {
                    this.removeTodo(todo)
                }
            },
            cancelEdit(todo) {
                this.editedTodo = null
                todo.title = this.beforeEditCache
            },
            removeCompleted () {
                this.todos = filters.active(this.todos)
            },
            pluralize(n) {
                return n === 1 ? 'item' : 'items'
            }
        }
    }
})